/**
 * 登录页面脚本
 */
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const loginForm = document.getElementById('loginForm');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const usernameError = document.getElementById('username-error');
    const passwordError = document.getElementById('password-error');
    const rememberMeCheckbox = document.getElementById('rememberMe');
    const loginButton = document.getElementById('loginButton');
    const alertContainer = document.getElementById('alertContainer');
    
    // 检查本地存储中是否有保存的用户名
    checkSavedUsername();
    
    // 添加表单提交事件监听器
    loginForm.addEventListener('submit', handleLogin);
    
    // 添加实时验证
    usernameInput.addEventListener('input', () => validateField(usernameInput, usernameError, validateUsername));
    passwordInput.addEventListener('input', () => validateField(passwordInput, passwordError, validatePassword));
    
    /**
     * 处理登录表单提交
     * @param {Event} event - 表单提交事件
     */
    async function handleLogin(event) {
        event.preventDefault();
        
        // 清除之前的错误提示
        clearErrors();
        
        // 表单验证
        const isUsernameValid = validateField(usernameInput, usernameError, validateUsername);
        const isPasswordValid = validateField(passwordInput, passwordError, validatePassword);
        
        if (!isUsernameValid || !isPasswordValid) {
            return;
        }
        
        // 显示加载状态
        setLoading(true);
        
        try {
            // 使用新的认证服务进行登录
            await window.login(
                usernameInput.value.trim(),
                passwordInput.value,
                rememberMeCheckbox.checked
            );
            
            // 处理登录成功
            // 保存用户名到本地存储（如果选择了"记住我"）
            if (rememberMeCheckbox.checked) {
                localStorage.setItem('savedUsername', usernameInput.value.trim());
            } else {
                localStorage.removeItem('savedUsername');
            }
            
            // 显示成功消息
            showAlert('登录成功，正在跳转...', 'success');
            
            // 直接跳转到仪表盘
            setTimeout(() => {
                window.location.href = '/dashboard';
            }, 1000);
        } catch (error) {
            console.error('登录失败:', error);
            showAlert(error.message || '登录失败，请检查用户名和密码', 'danger');
        } finally {
            // 取消加载状态
            setLoading(false);
        }
    }
    
    /**
     * 验证用户名
     * @param {string} username - 用户名
     * @returns {string} 错误消息，如果没有错误则返回空字符串
     */
    function validateUsername(username) {
        if (!username) {
            return '请输入用户名';
        }
        if (username.length < 3) {
            return '用户名长度不能少于3个字符';
        }
        return '';
    }
    
    /**
     * 验证密码
     * @param {string} password - 密码
     * @returns {string} 错误消息，如果没有错误则返回空字符串
     */
    function validatePassword(password) {
        if (!password) {
            return '请输入密码';
        }
        if (password.length < 6) {
            return '密码长度不能少于6个字符';
        }
        return '';
    }
    
    /**
     * 验证表单字段
     * @param {HTMLElement} inputElement - 输入元素
     * @param {HTMLElement} errorElement - 错误提示元素
     * @param {Function} validationFunction - 验证函数
     * @returns {boolean} 是否验证通过
     */
    function validateField(inputElement, errorElement, validationFunction) {
        const value = inputElement.value.trim();
        const errorMessage = validationFunction(value);
        
        if (errorMessage) {
            inputElement.classList.add('is-invalid');
            inputElement.classList.remove('is-valid');
            errorElement.textContent = errorMessage;
            return false;
        } else {
            inputElement.classList.remove('is-invalid');
            inputElement.classList.add('is-valid');
            errorElement.textContent = '';
            return true;
        }
    }
    
    /**
     * 清除所有错误提示
     */
    function clearErrors() {
        usernameError.textContent = '';
        passwordError.textContent = '';
        alertContainer.innerHTML = '';
    }
    
    /**
     * 设置按钮加载状态
     * @param {boolean} isLoading - 是否处于加载状态
     */
    function setLoading(isLoading) {
        if (isLoading) {
            loginButton.disabled = true;
            loginButton.classList.add('btn-loading');
        } else {
            loginButton.disabled = false;
            loginButton.classList.remove('btn-loading');
        }
    }
    
    /**
     * 显示提示消息
     * @param {string} message - 提示消息
     * @param {string} type - 提示类型：success, danger, warning, info
     */
    function showAlert(message, type) {
        // 创建提示元素
        const alert = document.createElement('div');
        alert.className = `alert alert-${type} alert-fade-in`;
        
        // 创建图标
        const icon = document.createElement('div');
        icon.className = 'alert-icon';
        
        // 根据类型设置不同的图标
        let iconSvg = '';
        switch (type) {
            case 'success':
                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>';
                break;
            case 'danger':
                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>';
                break;
            case 'warning':
                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>';
                break;
            default:
                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>';
        }
        
        icon.innerHTML = iconSvg;
        
        // 创建内容
        const content = document.createElement('div');
        content.className = 'alert-content';
        content.textContent = message;
        
        // 创建关闭按钮
        const closeBtn = document.createElement('button');
        closeBtn.className = 'alert-close';
        closeBtn.innerHTML = '&times;';
        closeBtn.addEventListener('click', function() {
            alert.classList.remove('alert-fade-in');
            alert.classList.add('alert-fade-out');
            setTimeout(() => {
                alert.remove();
            }, 300);
        });
        
        // 组装提示框
        alert.appendChild(icon);
        alert.appendChild(content);
        alert.appendChild(closeBtn);
        
        // 添加到容器
        alertContainer.innerHTML = '';
        alertContainer.appendChild(alert);
        
        // 自动关闭（成功提示）
        if (type === 'success') {
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.classList.remove('alert-fade-in');
                    alert.classList.add('alert-fade-out');
                    setTimeout(() => {
                        if (alert.parentNode) {
                            alert.remove();
                        }
                    }, 300);
                }
            }, 3000);
        }
    }
    
    /**
     * 检查本地存储中是否有保存的用户名
     */
    function checkSavedUsername() {
        const savedUsername = localStorage.getItem('savedUsername');
        if (savedUsername) {
            usernameInput.value = savedUsername;
            rememberMeCheckbox.checked = true;
        }
    }
}); 